define([
    'jquery',
    'underscore',
    'backbone',
    //'text!templates/form/form_add_admin.html'
    ], function($, _, Backbone,loginTemplate){
        var $html_loadding = '<div class="caculation-report"><img style="margin-left:170px" src="'+$template_admincp_url+'img/standard/loaders/loading64.gif"/></div>';
        var dashboardView = Backbone.View.extend({
            el: $("#main"),
            initialize: function(){
				
            },
            events: {
                
            },
            
            view: function(){
                // define the options
                // var options = {

                //     chart: {
                //     },

                //     title: {
                //         text: 'Daily visits at www.beforever.info'
                //     },

                //     subtitle: {
                //         text: 'Source: Google Analytics'
                //     },

                //     xAxis: {
                //         type: 'datetime',
                //         tickInterval: 7 * 24 * 3600 * 1000, // one week
                //         tickWidth: 0,
                //         gridLineWidth: 1,
                //         labels: {
                //             align: 'left',
                //             x: 3,
                //             y: -3
                //         }
                //     },

                //     yAxis: [{ // left y axis
                //         title: {
                //             text: null
                //         },
                //         labels: {
                //             align: 'left',
                //             x: 3,
                //             y: 16,
                //             formatter: function() {
                //                 return Highcharts.numberFormat(this.value, 0);
                //             }
                //         },
                //         showFirstLabel: false
                //     }, { // right y axis
                //         linkedTo: 0,
                //         gridLineWidth: 0,
                //         opposite: true,
                //         title: {
                //             text: null
                //         },
                //         labels: {
                //             align: 'right',
                //             x: -3,
                //             y: 16,
                //             formatter: function() {
                //                 return Highcharts.numberFormat(this.value, 0);
                //             }
                //         },
                //         showFirstLabel: false
                //     }],

                //     legend: {
                //         align: 'left',
                //         verticalAlign: 'top',
                //         y: 20,
                //         floating: true,
                //         borderWidth: 0
                //     },

                //     tooltip: {
                //         shared: true,
                //         crosshairs: true
                //     },

                //     plotOptions: {
                //         series: {
                //             cursor: 'pointer',
                //             point: {
                //                 events: {
                //                     click: function() {
                //                         hs.htmlExpand(null, {
                //                             pageOrigin: {
                //                                 x: this.pageX,
                //                                 y: this.pageY
                //                             },
                //                             headingText: this.series.name,
                //                             maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                //                                 this.y +' visits',
                //                             width: 200
                //                         });
                //                     }
                //                 }
                //             },
                //             marker: {
                //                 lineWidth: 1
                //             }
                //         }
                //     },

                //     series: [{
                //         name: 'All visits',
                //         lineWidth: 4,
                //         marker: {
                //             radius: 4
                //         }
                //     }, {
                //         name: 'New visitors'
                //     }]
                // };


                // // Load data asynchronously using jQuery. On success, add the data
                // // to the options and initiate the chart.
                // // This data is obtained by exporting a GA custom report to TSV.
                // // http://api.jquery.com/jQuery.get/
                // jQuery.get('../assets/api/data/analytics.tsv', null, function(tsv, state, xhr) {
                //     var lines = [],
                //         listen = false,
                //         date,

                //         // set up the two data series
                //         allVisits = [],
                //         newVisitors = [];

                //     // inconsistency
                //     if (typeof tsv !== 'string') {
                //         tsv = xhr.responseText;
                //     }

                //     // split the data return into lines and parse them
                //     tsv = tsv.split(/\n/g);
                //     jQuery.each(tsv, function(i, line) {
                //         // listen for data lines between the Graph and Table headers
                //         if (tsv[i - 3] == '# Graph') {
                //             listen = true;
                //         } else if (line == '' || line.charAt(0) == '#') {
                //             listen = false;
                //         }

                //         // all data lines start with a double quote
                //         if (listen) {
                //             line = line.split(/\t/);
                //             date = Date.parse(line[0] +' UTC');

                //             allVisits.push([
                //                 date,
                //                 parseInt(line[1].replace(',', ''), 10)
                //             ]);
                //             newVisitors.push([
                //                 date,
                //                 parseInt(line[2].replace(',', ''), 10)
                //             ]);
                //         }
                //     });

                //     options.series[0].data = allVisits;
                //     options.series[1].data = newVisitors;

                //     $('#container').highcharts(options);
                // });

                jQuery(document).ready(function(){
    
                    function showTooltip(x, y, contents) {
                        jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
                          position: 'absolute',
                          display: 'none',
                          top: y + 5,
                          left: x + 5
                        }).appendTo("body").fadeIn(200);
                     }
                    
                    var uploads = [[0, 2], [1, 6], [2,3], [3, 8], [4, 5], [5, 13], [6, 8]];
                     var downloads = [[0, 5], [1, 4], [2,4], [3, 1], [4, 9], [5, 10], [6, 13]];
                    
                     var plot = jQuery.plot(jQuery("#basicflot"),
                        [ { data: uploads,
                          label: "Uploads",
                          color: "#1CAF9A"
                        },
                        { data: downloads,
                          label: "Downloads",
                          color: "#428BCA"
                        }
                      ],
                      {
                          series: {
                             lines: {
                            show: true,
                            fill: true,
                            lineWidth: 1,
                            fillColor: {
                              colors: [ { opacity: 0.5 },
                                        { opacity: 0.5 }
                                      ]
                            }
                          },
                             points: {
                            show: true
                          },
                          shadowSize: 0
                          },
                          legend: {
                          position: 'nw'
                        },
                          grid: {
                          hoverable: true,
                          clickable: true,
                          borderColor: '#ddd',
                          borderWidth: 1,
                          labelMargin: 10,
                          backgroundColor: '#fff'
                        },
                          yaxis: {
                          min: 0,
                          max: 15,
                          color: '#eee'
                        },
                        xaxis: {
                          color: '#eee'
                        }
                        });
                        
                     var previousPoint = null;
                     jQuery("#basicflot").bind("plothover", function (event, pos, item) {
                      jQuery("#x").text(pos.x.toFixed(2));
                      jQuery("#y").text(pos.y.toFixed(2));
                            
                        if(item) {
                          if (previousPoint != item.dataIndex) {
                             previousPoint = item.dataIndex;
                                        
                             jQuery("#tooltip").remove();
                             var x = item.datapoint[0].toFixed(2),
                             y = item.datapoint[1].toFixed(2);
                                
                             showTooltip(item.pageX, item.pageY,
                                  item.series.label + " of " + x + " = " + y);
                          }
                            
                        } else {
                          jQuery("#tooltip").remove();
                          previousPoint = null;            
                        }
                        
                     });
                        
                     jQuery("#basicflot").bind("plotclick", function (event, pos, item) {
                        if (item) {
                          plot.highlight(item.series, item.datapoint);
                        }
                     });
                    
                    // Donut Chart
                    new Morris.Donut({
                        element: 'donut-chart2',
                        data: [
                          {label: "Chrome", value: 30},
                          {label: "Firefox", value: 20},
                          {label: "Opera", value: 20},
                          {label: "Safari", value: 20},
                          {label: "Internet Explorer", value: 10}
                        ],
                        colors: ['#D9534F','#1CAF9A','#428BCA','#5BC0DE','#428BCA']
                    });
                    
                    
                    new Morris.Line({
                        // ID of the element in which to draw the chart.
                        element: 'line-chart',
                        // Chart data records -- each entry in this array corresponds to a point on
                        // the chart.
                        data: [
                            { y: '2006', a: 50, b: 0 },
                            { y: '2007', a: 60,  b: 25 },
                            { y: '2008', a: 45,  b: 30 },
                            { y: '2009', a: 40,  b: 20 },
                            { y: '2010', a: 50,  b: 35 },
                            { y: '2011', a: 60,  b: 50 },
                            { y: '2012', a: 65, b: 55 }
                        ],
                        xkey: 'y',
                        ykeys: ['a', 'b'],
                        labels: ['Series A', 'Series B'],
                        gridTextColor: 'rgba(255,255,255,0.5)',
                        lineColors: ['#fff', '#fdd2a4'],
                        lineWidth: '2px',
                        hideHover: 'always',
                        smooth: false,
                        grid: false
                    });
                    
                    jQuery('#sparkline').sparkline([4,3,3,1,4,3,2,2,3,10,9,6], {
                          type: 'bar', 
                          height:'30px',
                        barColor: '#428BCA'
                    });
                    
                    
                    jQuery('#sparkline2').sparkline([9,8,8,6,9,10,6,5,6,3,4,2], {
                          type: 'bar', 
                          height:'30px',
                        barColor: '#999'
                    });
                    
                    
                    jQuery('#table1').dataTable({
                      "iDisplayLength": 5,
                      "bLengthChange": false
                    });
                    
                });
                
            },
            
            render: function(){
                if(typeof this[$app.action] != 'undefined'){
                    new this[$app.action];
                }
            }
        });
        return dashboardView = new dashboardView;
    });
